<template>
	<div class="admin-wiki-edit-right">
		<div class="head" v-if="viewModel">
			<input class="input" v-model="viewModel.name" maxlength="30" @input="changeTime" @change="changeTime" />
			<div class="save-edit" @click="save">保存</div>
		</div>
		<div class="content" v-if="async">
			<x-markdown v-model="viewModel.content" @change="changeTime" ref="xMarkdown"></x-markdown>
		</div>
	</div>
</template>


<script>
	import ala from 'ala'
	export default {
		props: {
			height: {}
		},
		data() {
			return {
				viewModel: null,
				wikiData: null, // 服务器数据
				async: false,
				lastTime: 0
			}
		},
		methods: {
			async init(data) {
				if (data) {
					this.viewModel = data
					this.wikiData = await this.$api.entityById('Wiki', data.id)
					this.viewModel.content = this.wikiData.content
					this.async = true
					this.$nextTick(() => {
						if (this.$refs.xMarkdown) {
							this.$refs.xMarkdown.init(this.viewModel.content)
						}
					})
				}
			},
			async save() {
				var response = await this.$admin.wikiEdit(true, this.viewModel, this.wikiData)
				if (response) {
					this.$message.success(`${this.viewModel.name}保存成功`)
				}
			},
			// 设置5秒后自动保存
			changeTime() {
				if (this.viewModel && this.viewModel.content) {
					if (this.lastTime === 0) {
						this.lastTime = setTimeout(async () => {
							await this.$admin.wikiEdit(false, this.viewModel)
						}, 5000)
					} else {
						clearTimeout(this.lastTime)
						this.lastTime = setTimeout(async () => {
							await this.$admin.wikiEdit(false, this.viewModel)
						}, 5000)
					}
				}
			}
		}
	}
</script>


<style lang="scss">
	.admin-wiki-edit-right {
		width: 100%;
		background: #fff;
		border-left: 1px solid #f1f1f1;

		// box-shadow: 0px 1px 15px 1px rgba(69, 65, 78, 0.1);
		.head {
			height: 60px;
			width: 100%;
			background: none;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.input {
				margin: 0 !important;
				padding: 0 20px;
				font-size: 20px;
				width: 80% !important;
				height: 60px;
				outline: none;
			}

			.save-edit {
				width: 120px;
				height: 60px;
				// border-radius: 3px;
				cursor: pointer;
				background: #34bfa3;
				margin-left: 20px;
				font-size: 15px;
				color: #fff;
				line-height: 60px;
				text-align: center;
			}
		}

		.content {
			.v-note-wrapper {
				border: none !important;
			}

			.v-note-op {
				border-radius: none !important;
				border-top: 1px solid #f1f1f1;
				border-bottom: 1px solid #f1f1f1;
			}

			.v-note-wrapper .v-note-panel .v-note-edit.divarea-wrapper {
				border-right: 1px solid #f1f1f1;
			}

			.v-note-wrapper .v-note-panel .v-note-show .v-show-content,
			.v-note-wrapper .v-note-panel .v-note-edit.divarea-wrapper.transition,
			.v-note-wrapper .v-note-panel .v-note-edit.divarea-wrapper.single-edit {
				height: 792px;
			}
		}
	}
</style>